<template>
	<view class="container">

		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/file_bg.png') +')'}">
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#fff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>

		 <view class="boxPanel rel">
			<view class="flex-between m-b-20">
				<view class="c-77">指标来源</view>
				<view class="">{{detail.deviceName}}</view>
			</view>
			<view class="flex-between">
				<view class="c-77">检测时间</view>
				<view class="">{{$util.timeStampTurnTime(detail.update_time)}}</view>
			</view>
		</view>

		
		
		
		<view class="rel m-t-30">
		<!-- <scroll-view class="rel m-t-30" scroll-x> -->
			<view v-for="(item, index) in tableData" :key="index" class="fill-base">
				<view class="text-bold flex-y-center rel font-30 m-r-24 m-t-30 m-b-24 p-t-24">
					<text class="line"></text>
					{{item.name}}
				</view>
				<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" >
					<uni-tr>
						<uni-th width="50" align="center">序号</uni-th>
						<uni-th width="100" align="center">项目</uni-th>
						<uni-th align="center" width="140">结果</uni-th>
						<uni-th width="50" align="center">单位</uni-th>
					</uni-tr>
					<uni-tr v-for="(optionItem, optionIndex) in item.list" :key="optionIndex">
						<uni-td align="center">{{ optionIndex+1 }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ optionItem.name }}</view>
						</uni-td>
						<uni-td align="center">{{ optionItem.value }}</uni-td>
						<uni-td align="center">{{ optionItem.unit }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
		<!-- </scroll-view> -->
		</view>

		<view class="fixfooter">
			<view class="warnbtn" @click="$util.redirectTo('/otherpages/health/comparison?id='+id)">
				<image :src="$util.img('/image/duibi.png')" mode=""></image>
				档案对比
			</view>
			<view class="searchPdf" @click="searchPdf()">
				查看报告
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				detail: {},
				id: '',
				tableData: [],
			}
		},
		onLoad(data) {
			this.id = data.id;
			this.getDetail()
		},
		methods: {
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getHistoryData",
			      data: {
					hId: this.id
				  },
			      success: res => {
			        if(res.code == 0) {
						this.detail = res.data;
						this.tableData = res.data.profile;
						
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			searchPdf() {
				this.$util.redirectTo('/otherpages/health/pdfList?id='+this.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 531rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}

.warnbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 252rpx;
    height: 87rpx;
    border-radius: 60rpx;
    color: #fff;
    background: $color-title2;
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
}

.fixfooter {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	bottom: 20rpx;
}

.searchPdf {
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
    width: 252rpx;
    height: 87rpx;
    border-radius: 60rpx;
    color: #fff;
    background: #FF4D21;
	margin-left: 30rpx;
}
.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}
</style>
